<template>
  <uni-popup ref="filterPopupRef" type="right" @change="handleFilterChange">
    <view class="filter-popup">
      <view class="filter-header">
        <text>筛选条件</text>
        <uni-icons
          type="closeempty"
          size="20"
          color="#666"
          @click="closeFilter"
        ></uni-icons>
      </view>
      <view class="filter-content">
        <view class="filter-item">
          <text class="filter-label">时间范围</text>
          <view class="filter-options">
            <view
              v-for="(item, index) in timeFilters"
              :key="index"
              :class="[
                'filter-option',
                currentTimeFilter === item.value ? 'active' : '',
              ]"
              @click="handleTimeFilter(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="filter-item">
          <text class="filter-label">活动地点</text>
          <view class="filter-options">
            <view
              v-for="(item, index) in locationFilters"
              :key="index"
              :class="[
                'filter-option',
                currentLocationFilter === item.value ? 'active' : '',
              ]"
              @click="handleLocationFilter(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
      </view>
      <view class="filter-footer">
        <button class="reset-btn" @click="resetFilter">重置</button>
        <button class="confirm-btn" @click="confirmFilter">确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    timeFilters: {
      type: Array,
      default: () => [
        { label: "全部", value: "all" },
        { label: "本周", value: "week" },
        { label: "本月", value: "month" },
        { label: "本年", value: "year" },
      ],
    },
    locationFilters: {
      type: Array,
      default: () => [
        { label: "全部", value: "all" },
        { label: "滨江公园", value: "park" },
        { label: "市中心广场", value: "square" },
        { label: "社区文化中心", value: "community" },
        { label: "奥体中心", value: "sports" },
        { label: "艺术馆", value: "art" },
      ],
    },
  },
  data() {
    return {
      currentTimeFilter: "all",
      currentLocationFilter: "all",
    };
  },
  methods: {
    // 判断输入的时间戳是否在指定时间范围 timeFilters 内
    isTimeInRange(timestamp) {
      const now = new Date();
      const targetDate = new Date(timestamp);

      switch (this.currentTimeFilter) {
        case "week":
          const weekAgo = new Date();
          weekAgo.setDate(now.getDate() - 7);
          return targetDate >= weekAgo;

        case "month":
          const monthAgo = new Date();
          monthAgo.setMonth(now.getMonth() - 1);
          return targetDate >= monthAgo;

        case "year":
          const yearAgo = new Date();
          yearAgo.setFullYear(now.getFullYear() - 1);
          return targetDate >= yearAgo;

        case "all":
        default:
          return true; // 全部时间范围直接返回true
      }
    },
    openFilter() {
      //   console.log("this.locationFilters", this.locationFilters);
      this.$refs.filterPopupRef.open("right");
    },
    closeFilter() {
      this.$refs.filterPopupRef.close();
    },
    handleTimeFilter(value) {
      this.currentTimeFilter = value;
    },
    handleLocationFilter(value) {
      this.currentLocationFilter = value;
    },
    handleFilterChange(e) {
      this.$emit("change", e.show);
    },
    resetFilter() {
      this.currentTimeFilter = "all";
      this.currentLocationFilter = "all";
      this.$emit("reset");
    },
    confirmFilter() {
      this.closeFilter();
      this.$emit("confirm", {
        timeFilter: this.currentTimeFilter,
        locationFilter: this.currentLocationFilter,
      });
    },
  },
};
</script>

<style scoped>
.filter-popup {
  width: 600rpx;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.filter-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  font-size: 16px;
  font-weight: bold;
}

.filter-content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.filter-item {
  margin-bottom: 30rpx;
}

.filter-label {
  font-size: 14px;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.filter-option {
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #666666;
}

.filter-option.active {
  background-color: #4caf50;
  color: #ffffff;
}

.filter-footer {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
}

.reset-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  background-color: #f5f5f5;
  color: #666666;
  font-size: 14px;
}

.confirm-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  background-color: #4caf50;
  color: #ffffff;
  font-size: 14px;
}
</style>
